<template>
    <div class="train-container">
        <nav-bar title="训练试卷"></nav-bar>
        <div class="content">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
                <train-list :list="list"></train-list>
            </van-list>
        </div>
        <div class="btn-wrap">
            <div class="btn" @click="handleAdd">新建试卷</div>
        </div>
    </div>
</template>
<script>
import TrainList from "./components/TrainList";
export default {
    name: "train",
    components: {
        TrainList,
    },

    data() {
        return {
            loading: false,
            finished: false,
            pageNo: 0,
            list: [],
        };
    },
    mounted() {},
    methods: {
        getData() {
            this.$APIs.getTrainPaper({ pageNo: this.pageNo + 1, pageSize: 10 }).then(data => {
                if (data.data.length) {
                    this.pageNo += 1;
                    this.list.push(...data.data);
                    this.loading = false;
                } else {
                    this.finished = true;
                    this.loading = false;
                }
            });
        },
        handleAdd() {
            this.$router.push({
                path: "new-papers",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.train-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-list {
        padding-bottom: 75px;
    }
    .content {
        padding: 15px;
        background-color: #21202e;
        flex: 1;
        overflow-y: scroll;
    }
    .title {
        font-size: 18px;
    }
    .input-item {
        font-size: 15px;
        color: #ffffff;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        span {
        }
        input {
            flex: 1;
            width: 250px;
            height: 44px;
            border: 1px solid #56baca;
            border-radius: 5px;
            color: #fff;
            background-color: #21202e;
            padding: 0 15px;
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #6d6d79;
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: #6d6d79;
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {
            color: #6d6d79;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #6d6d79;
        }
    }
}
.container {
    height: 100%;
    padding-bottom: 74px;
    display: flex;
    flex-direction: column;
    overflow: scroll;
}
.van-list {
}
.btn-wrap {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #161624;
    padding: 15px;
    display: flex;

    .btn {
        flex: 1;
        background: #56baca;
        color: #fff;
        height: 44px;
        text-align: center;
        line-height: 44px;
        border-radius: 5px;
        font-size: 18px;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>
